<template>
  <el-dialog v-model="showDialog"
             :title="title"
             :draggable="true"
             :destroy-on-close="true"
             :close-on-click-modal="false"
             @opened="handleOpenedDialog"
             @close="handleCloseDialog"
             style="width: 800px; height: 750px"
  >
    <div style="text-align: center; width: 100%; height: 600px">
      <el-transfer v-model="selectInfo"
                   :data="transferData"
                   :filterable="true"
                   :titles="['未选中', '已选中']"
                   style="height: 600px; padding-top: 20px"
      >
      </el-transfer>
    </div>
    <template #footer>
      <el-button type="primary" @click="confirmRelation">确认</el-button>
      <el-button type="danger" @click="handleCloseDialog">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, watch} from "vue";
import {getAllUserDropDownReq, getUserRoleIdsReq} from "@/api/admin/user.ts";
import {
  RELATION_TYPE_MENU,
  RELATION_TYPE_ROLE_TO_MENU,
  RELATION_TYPE_ROLE_TO_USER,
  RELATION_TYPE_USER
} from "@/constants/common-constant.ts";
import {getAllRoleDropDownReq, getRoleDropDownReq, getRoleMenuIdsReq, getRoleUserIdsReq} from "@/api/admin/role.ts";
import {getAllPageDropDownReq, getMenuRoleIdsReq} from "@/api/admin/menu.ts";

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  relationId: {
    type: String,
    default: ''
  },
  relationType: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['handleCloseDialog', 'handleOpenDialog', 'confirmRelation'])
const showDialog = ref(props.showDialog)
watch(() => props.showDialog, (val: boolean) => {
  showDialog.value = val
})

const selectInfo = ref<any[]>([])
const transferData = ref<any[]>([])
const handleOpenedDialog = () => {
  emit('handleOpenDialog')
  initTransfer().then()
}

const handleCloseDialog = () => {
  emit('handleCloseDialog', false)
}

const initTransfer = async () => {
  const newRelationType = props.relationType
  if (newRelationType === RELATION_TYPE_USER) {
    const allRoleRes: any = await getAllRoleDropDownReq({})
    transferData.value = allRoleRes.data

    const params = {
      id: props.relationId
    }
    const userRoleRes: any = await getUserRoleIdsReq(params)
    selectInfo.value = userRoleRes.data
    return;
  }

  if (newRelationType === RELATION_TYPE_ROLE_TO_USER) {
    const allUserRes: any = await getAllUserDropDownReq({})
    transferData.value = allUserRes.data

    const params = {
      id: props.relationId
    }
    const roleUserRes: any = await getRoleUserIdsReq(params)
    selectInfo.value = roleUserRes.data
    return;
  }

  if (newRelationType === RELATION_TYPE_ROLE_TO_MENU) {
    const allMenuRes: any = await getAllPageDropDownReq({})
    transferData.value = allMenuRes.data

    const params = {
      id: props.relationId
    }
    const roleMenuRes: any = await getRoleMenuIdsReq(params)
    selectInfo.value = roleMenuRes.data
    return;
  }

  if (newRelationType === RELATION_TYPE_MENU) {
    const allMenuRes: any = await getRoleDropDownReq({})
    transferData.value = allMenuRes.data

    const params = {
      id: props.relationId
    }
    const roleMenuRes: any = await getMenuRoleIdsReq(params)
    selectInfo.value = roleMenuRes.data
    return;
  }
}

const confirmRelation = () => {
  emit('confirmRelation', {relationId: props.relationId, selectInfo: selectInfo.value})
}

</script>

<style scoped>
.el-transfer {
  --el-transfer-panel-width: 250px;
  --el-transfer-panel-body-height: 500px;
}

</style>